Vue3 新特性初体验

您所在的位置：网站首页 › vue为什么用export deflault › Vue3 新特性初体验

Vue3 新特性初体验

2024-07-09 17:37| 来源: 网络整理| 查看: 265

Vue3 新特性 1、初始化开发环境 // 安装 / 更新 vue-cli （保证版本在4.5.0以上） npm install -g @vue/cli // 创建 vue create vue3-basic // 然后选择 Manually select features （因为我们需要使用TS），进入界面后选择TS（按空格选择） // 然后选择Vue3，后面都保持默认和选择 No 2、ref 的使用

在 vue3 的 script 中不再使用 data 和 methods ，而是使用 setup() 方法

ref， computed 等都是属于 composition API

{{count}} {{double}} 点击 import { ref, computed } from "vue"; export default ({ name: 'App', setup() { const count = ref(0) // ref 接受一个参数，返回的是一个响应式对象 const double = computed(() => { return count.value * 2 }) const increase = () => { count.value ++ // count是对象，这样才能获取到值 } return { count, double, increase } } }); 3、reactive 的使用

reactive 可以将需要导出的数据都包裹在一个对象中，而不是单独存在

{{count}} {{double}} 点击 import { computed, reactive, toRefs } from "vue"; interface DataProps { // 此处是为了解决 data 对象显示为 any 类型报错 count: number; increase: () => void; double: number; } export default ({ name: 'App', setup() { const data: DataProps = reactive({ // reactive 是一个方法，接受一个对象 count: 0, increase: () => { data.count ++ }, double: computed(() => { return data.count * 2 }) }) // 如果仅仅将 data 进行展开会丧失响应式，所以用 toRefs把每一项都转化为响应式对象 const refData = toRefs(data) return { ...refData // 展开之后再模板中就不用写 data. 的前缀了 } } });

同时， vue3 还支持直接新增 data 中的数据以及修改 data 中数组和对象的每一项，这样的修改也是响应式的。

4、生命周期钩子

在旧的 beforeCreate 钩子函数之后和 created 的钩子函数之前立即调用 setup 方法。因此，我们不再需要这两个钩子，我们可以简单地将本应有的代码放在 setup() 方法中。

此外，还有 9 个旧的生命周期函数可以在 setup() 中使用，使用前必须先导入

onBeforeMountonMountedonBeforeUpdateonUpdatedonBeforeUnmountonUnmountedonActivatedonDeactivatedonErrorCaptured // 例子 import { onMounted, onUpdated } from 'vue' export default { setup() { onMounted(() => { // ... }) onUpdated(() => { // ... }) } } 5、 Watch 侦听变化 import { watch } from 'vue' export default { setup() { // 1. 当监听的是 ref 返回的响应式对象 watch(data, (newValue, oldValue) => { // ... }) // 2. 当监听的是多个数据 watch([data1, data2], (newValue, oldValue) => { // ... }) // 3. 当监听的是多个对象，且包含 reactive 对象内的数据时 watch([data1, () => data.data2], (newValue, oldValue) => { // ... }) } } 6、模块化

以下是两个例子：

鼠标追踪器

由于将代码都写入 setup() 会使代码过于冗余和复杂，故对多次需要使用的代码实现模块化

src / hooks / useMousePosition.ts

import { ref, onMounted, onUnmounted } from 'vue' function useMousePosition() { const x = ref(0) const y = ref(0) const updateMouse = (e: MouseEvent) => { x.value = e.pageX y.value = e.pageY } onMounted(() => { document.addEventListener('click', updateMouse) }) onUnmounted(() => { document.removeEventListener('click', updateMouse) }) return { x, y } } export default useMousePosition;

使用

import { useMousePosition } from './hooks/useMousePosition.ts' export default { setup() { const { x, y } = useMousePosition() return { x, y } } } useURLLoader import { reactive, toRefs } from 'vue' import axios from 'axios' function useURLLoader(url: string) { const data = reactive({ result: null, loadState: true, errInfo: null }) axios.get(url).then((res) => { data.loadState = false data.result = res.data.message }).catch(e => { data.loadState = false data.errInfo = e }) const refData = toRefs(data) return { ...refData } } export default useURLLoader 7、defineComponent 的使用

使用 defineComponent 能够让传入的对象获得类型以及能够获得自动提示

import { defineComponent } from 'vue'; export default defineComponent({ name: 'HelloWorld', props: { msg: String, }, setup(props, context) { ... } }); 8、Teleport (瞬间移动) 组件的使用

有时在组件中需要用到弹窗时，将弹窗的代码全部写到层层嵌套的组件中，不太符合逻辑也不太方便查看。使用Teleport 能将组件的内容挂在到其他组件上

// 首先需要在父组件中引入该组件 // 使用 this is a model // 挂载 // 在index.html中 9、 emits向父组件触发事件 // 例子 this is a model 关闭 import { defineComponent } from "vue"; export default defineComponent({ name: "Model", props: { isOpen: Boolean, }, emits: { "close-modal": (payload: any) => { // 进行类型的校验，没有就写 null return payload.type === "close"; }, }, setup(props, context) { const buttonClick = () => { context.emit("close-modal", { type: "hello", }); }; return { buttonClick } }, }); 10、 Suspense 组件解决异步请求的困境Suspense是Vue3推出的一个内置的特殊组件如果使用Suspense，要返回一个promise

使用Promise：

{{result}} import {defineComponent} from 'vue' export default defineComponent({ setup() { return new Promise((resolve) => { // 返回的必须是Promise setTimeout(() => { return resolve({ result: 10 }) },1000) }) } }) loading!!!

使用 async：

import { defineComponent } from "vue"; import axios from "axios"; export default defineComponent({ async setup() { const rawData = await axios.get("https://www.example.com/"); // 测试使用 return { result: rawData.data, }; }, });

可以使用 onErrorCaptured() 生命周期函数监听网络请求的错误

【本文地址】

Vue3 新特性初体验

Vue3 新特性初体验

今日新闻

推荐新闻